<head>
	<script type='text/javascript' src='https://www.google.com/jsapi'></script>
	<script language="JavaScript" src="/fusion_charts/maps/JSClass/FusionMaps.js"></script>
	<script type="text/javascript" src="/fusion_charts/Charts/FusionCharts.js"></script>
	<script type="text/javascript">
		function detail_us(url, height) {
			$('#stateframe').attr({
				'src': url,
				'height': height
			})
			//$('html, body').animate({scrollTop: 120}, 'slow');
		}
	</script>
</head>
<table  id="table_main" border="0" cellspacing="0" cellpadding="3" align="left">
	<tr>
		<td>
		<!-- 
			--
			--
			-- Tabular view for the US
			--
			--
		-->
		<table class="inner_table">
			<tr>
				<th>ST</th>
				<th>Area Code</th>
				<th>Total Calls</th>

			</tr>
			<tr>
				<td colspan="3">
				<div id="map_us">
				</div>
				</td>
			</tr>
			<% @us_count_per_area.each do |n| %>
			<%
	 ###############################################################################################
     ##       Structure of these array above 
     ###############################################################################################
     # The key is areacode_for_us. This is NOT number, which is US-CA or UNNKOWN something like this
     #
     # areacode_for_us => "areanumber(probably 3 digits)" => hash_data(areanumber, number of calls) (e.g. {213=>23, 805=>5657}) #total for one areanumber
     # (e.g. US-CA)    => "iso_country_code"              => string_data (must be US)
     #                 => "sum_calls"                     => integer_data(e.g. 2434)                ##total for one state
     ###############################################################################################

			%>
			<tr>
				<% 
					key 	= n[0]
					value	= n[1]
					state	= key
					areas	= value["areanumber"] 			# which is ARRAY !!
					iso		= value["iso_country_code"]		# string
					sum_calls= value["sum_calls"]			# number
					
				%>
				<td>
					<!-- This is the link for bar chart for each state when the state name is clicked, such as US-CA, etc -->
					<% link = url_for :action=>'src_phone_state', :id=>state, :p=>params[:p], :from=>params[:from], :to=>params[:to], :iso=>iso %>
					<%= link_to_function n[0], "detail_us('#{link}',700);" %>
          			<% #link_to n.areacode_for_us, :action=>'javascript:void', :id=>n.areacode_for_us, :p=>params[:p], :from=>params[:from], :to=>params[:to], :iso=>n["iso_country_code"]%>
				</td>
				<td>
								
					<% 	i = 0
						for item in areas #areacode(state) #areacode is my own function that returns all the areacode of the state %>
						<% areanumber 		= item[0]
				   		calls_per_number	= item[1] %>	
						
						<!-- the actual data(area xxx (total yyy) starts from here, dd tag is for formatting -->					
						<dd>
						<% link = url_for :action=>'src_phone_detail', :id=>areanumber, :p=>params[:p], :from=>params[:from], :to=>params[:to], :iso=>iso %>
						<%= link_to_function "area %s (total %s)"% [areanumber, calls_per_number], "detail_us('#{link}', 1500);"%>
					
						<% i += 1 %>
						
						<% if i%3==0 %>
						
						<% else %>
						<% end %>
						</dd>
					<% end %>
						<!-- the end of area and total, dd tag is for formatting -->
				</td>
				<td><%= sum_calls %></td>
			</tr>
			<% end %>
		</table>
		
		</td>
		<td valign="top" class="text" align="center">
		<!-- 
			--
			--
			-- the US Map
			--
			--
		-->
				<h5>the U.S.</h5>
				<div id="mapdiv" align="center">
					FusionMaps.
				</div>
				<% str_xml = render :file=>"callcache/src_usa", :locals=>{:arr_data=>@us_count_per_area} %>
				<script type="text/javascript">
					var map = new FusionMaps("/fusion_charts/maps/FCMap_USA.swf", "Map1Id", "750", "460", "0", "0");
					map.setDataXML('<%= raw(str_xml) %>');
					map.render("mapdiv");
				</script>
			
		
		<!-- 
			--
			--
			-- The view for each state and the detail of areacode
			--
			--
		-->
		<div id="state-view-block">
			<iframe style="border:none;" frameborder="0" height="100%" width="100%" id="stateframe" src="">
				Please click ST or Areacode on the right panel.
			</iframe>
		</div>
		</td>
		
	</tr>
</table>